import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../tool/assets.dart';

class ChooseColor extends StatefulWidget {
  List<int> colorList = [];
  int selectColorIndex = 10;
  void Function(int color, List<int> colorList) onChanged;
  ChooseColor({super.key, required this.colorList, required this.selectColorIndex, required this.onChanged});

  @override
  State<ChooseColor> createState() => _ChooseColorState();
}

class _ChooseColorState extends State<ChooseColor> {
  late final CircularColorPicker _coloCircular;
  late final _colorListView;
  @override
  void initState() {
    super.initState();

    ///色盘呢
    _coloCircular = CircularColorPicker(
      cirulaImage: assets.color,
      pointImage: assets.color_point,
      defaultColor: widget.colorList[widget.selectColorIndex],
      padding: const EdgeInsets.only(left: 0, right: 0),
      onChange: (p0) {
        if (widget.selectColorIndex < widget.colorList.length) {
          _colorListView.color = p0.decimal;
          widget.colorList[widget.selectColorIndex] = p0.decimal;
          // _setSignColor();
        }
      },
    );

    ///色列表
    _colorListView = ColorListView(
      height: 120,
      leftIsAdd: false,
      showColorList: widget.colorList,
      currentShowIndex: widget.selectColorIndex,
      onChange: (p0, p1) {
        var value = p0;
        value = (0xFF << 24) | (value & 0x00FFFFFF);
        _coloCircular.kstate.setInitialColor(Color(value));
        widget.selectColorIndex = p1;
        if (p1 < widget.colorList.length) {
          widget.colorList[widget.selectColorIndex] = p0;
        } else {
          widget.colorList.add(p0);
        }
      },
      onAddChanged: (result, index) {
        widget.colorList = result;
      },
      onRemoveChanged: (result, index) {
        widget.colorList = result;
      },
    );
    _colorListView.leftIcon = assets.arror_left;
    _colorListView.rightIcon = assets.arror_right;
  }

  void changeColor() {
    if (widget.selectColorIndex < widget.colorList.length) {
      widget.onChanged(widget.colorList[widget.selectColorIndex], widget.colorList);
    }
  }

  Widget getBtn(String title, Function() onPressed) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        gradient: localGradient,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.6), // 阴影的颜色
            spreadRadius: 2, // 阴影扩散的范围
            blurRadius: 5, // 阴影模糊程度
            offset: const Offset(0, 4), // 阴影的偏移量
          )
        ],
      ),
      child: TextButton(
        onPressed: onPressed,
        style: TextButton.styleFrom(
            minimumSize: const Size(120, 48),
            foregroundColor: Colors.white,
            // padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 设置内边距
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
            overlayColor: Colors.white), // 设置点击时的高亮背景颜色
        child: Text(title, style: const TextStyle(fontSize: 20)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 获取屏幕的宽度
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    GlobalConfig.scaleH = screenHeight / 667.0;

    // 设置状态栏背景颜色和图标颜色
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, // 状态栏背景色
      statusBarIconBrightness: Brightness.light, // 状态栏图标颜色 (白色图标)
    ));

    return Scaffold(
      appBar: null,
      body: Stack(
        children: [
          ///背景
          Positioned(
            child: Container(
              decoration: const BoxDecoration(
                image: DecorationImage(image: AssetImage(assets.bg_view), fit: BoxFit.fitHeight),
              ),
            ),
          ),

          Positioned(
              left: 20,
              right: 20,
              bottom: 100,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  getBtn('Cancel', () => Navigator.pop(context)),
                  getBtn('OK', () {
                    Navigator.pop(context);
                    if (widget.selectColorIndex < widget.colorList.length) {
                      widget.onChanged(widget.colorList[widget.selectColorIndex], widget.colorList);
                    }
                  })
                ],
              )),

          Positioned(
              left: 20,
              right: 20,
              top: 0,
              bottom: 0,
              child: Column(
                children: [
                  Flexible(flex: 2, child: _coloCircular),
                  Flexible(flex: 1, child: _colorListView),
                  const SizedBox(height: 100),
                ],
              ))
        ],
      ),
    );
  }
}
